<html>
	<head>
		<title>Demo</title>
		<script type="application/javascript;version=1.7" src="lib/jsdefs.js" > </script>
		<script type="application/javascript;version=1.7" src="lib/jslex.js" ></script>
		<script type="application/javascript;version=1.7" src="lib/jsparse.js" ></script>
		<script type="application/javascript;version=1.7" src="lib/jsresolve.js" ></script>
		<script type="application/javascript;version=1.7" src="lib/jsdecomp.js" ></script>
		<script type="application/javascript;version=1.7" src="lib/jsdesugar.js" ></script>
		<script type="application/javascript;version=1.7" src="lib/jsexec.js" ></script>
		<script type="application/javascript;version=1.7" src="lib/jsbrowser.js" ></script>
		<link rel="stylesheet" type="text/css" href="demoStyle.css" />
	</head>
	<body>
		<h2>DEMO</h2>
		<p><button type="button" id="btnScript" onclick="toScriptMode();" style="border-width:2px;">Scripts</button> - <button type="button" id="btnHTML" onclick="toHTMLMode();">HTML</button></p>
		<script type="text/javascript;version=1.7">
			try{
				var scriptMode = true;
				document.cookie='mysecretcookie=testcookie';
				Narcissus.interpreter.evaluate("var window=this;",{});
				var evaluateCode = function() {
					var policy = {};
					policy["cookie-read"] = document.getElementById("cookie_read").checked ? "yes" : "no";
					policy["cookie-write"] = document.getElementById("cookie_write").checked ? "yes" : "no";
					policy["domaccess-read"] = document.getElementById("domaccess_read").checked ? "yes" : "no";
					policy["domaccess-write"] = document.getElementById("domaccess_write").checked ? "yes" : "no";
					policy["storage-read"] = document.getElementById("storage_read").checked ? "yes" : "no";
					policy["storage-write"] = document.getElementById("storage_write").checked ? "yes" : "no";
					policy["extcomm"] = document.getElementById("extcomm").checked ? "yes" : "no";
					policy["geolocation"] = document.getElementById("geolocation").checked ? "yes" : "no";
					if(scriptMode){
						Narcissus.interpreter.evaluate("", policy);
						Narcissus.interpreter.evaluate(document.getElementById('codetext').value, policy);					
					}else{
						Narcissus.interpreter.evaluate("", policy);
						Narcissus.interpreter.evaluateHTML(document.getElementById('htmltext').value, document.getElementById('htmlframe'));
					}
//					Narcissus.interpreter.evaluate("try{\n "+ document.getElementById('codetext').value +" \n }catch(e){alert(e.message);}", policy);
				}
			}catch(e){
				alert("Oops, something went wrong: "+e.message);
			}
			var loadEx1 = function(){
				document.getElementById('codetext').value = "alert(document.cookie);\nalert('window.doc: ' + window.document.cookie);";
			}
			var loadEx2 = function(){
				document.getElementById('codetext').value = 'var xhr = new XMLHttpRequest();\nxhr.onreadystatechange = function() {\n\tif(xhr.readyState == 4){\n\t\talert(xhr.responseText);\n\t}\n}\nxhr.open("GET", "test.html", true);\nxhr.send(null);';
			}
			var loadEx3 = function(){
				document.getElementById('codetext').value = "alert(document.getElementById('testpar').textContent);"+				
				"\ndocument.getElementById('testpar').innerHTML = 'Random getal: '+ parseInt(Math.random()*100);";
			}
			var loadEx4 = function(){
				document.getElementById('codetext').value = 'var xhr = new XMLHttpRequest();\nxhr.onreadystatechange = function() {\n\tif(xhr.readyState == 4){\n\t\tdocument.getElementById("testpar").innerHTML = "<p>cookie: "+document.cookie+"</p>"+xhr.responseText;\n\t}\n}\nxhr.open("GET", "test.html", true);\nxhr.send(null);';
			}
			var loadExDocWrite = function(){
				document.getElementById('codetext').value = 'document.write("<scr'+'ipt>alert(document.cookie);</scri'+'pt>");';
			}
			var loadExScript = function(){
				document.getElementById('htmltext').value = '<p id="testpar1">?</p>\n<sc'+'ript>document.getElementById("testpar1").innerHTML = "The users cookie is: " + document.cookie;</scr'+'ipt>';
			}
			var loadExEvent = function(){
			document.getElementById('htmltext').value = '<scri'+'pt>\n\tvar executeFunc = function(element){\n\t\telement.style.color = "#" + ' +
			'(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);\n\t\telement.appendChild(document.createTextNode(" cookie: "+document.cookie)); \n\t}\n</scr'+'ipt>\n<p style="cursor:pointer;" onclick="executeFunc(this);">WOAW<p>';
			}
			var loadExXss = function(){
				document.getElementById('htmltext').value = '<p>\n\t<a href="javascript:alert(document.cookie);">Click me ! !</a>\n<p>';
			}
			var toScriptMode = function(){
				scriptMode = true;
				document.getElementById("htmlpart").style.display = "none";
				document.getElementById("scriptpart").style.display = "block";
				document.getElementById("btnScript").style.borderWidth = "2px";
				document.getElementById("btnHTML").style.borderWidth = "1px";
				document.getElementById("btnScript").style.borderWidth = "2px";
			}
			var toHTMLMode = function(){
				scriptMode=false;
				document.getElementById("scriptpart").style.display = "none";
				document.getElementById("htmlpart").style.display = "block";
				document.getElementById("btnScript").style.borderWidth = "1px";
				document.getElementById("btnHTML").style.borderWidth = "2px";
			}
			var resetHTML = function(){
				document.getElementById("htmlframe").innerHTML="";
			}
		</script>
		<form>
			<fieldset>
				<legend>Policy</legend>
				<p>
					<label for="cookie_read">cookie-read</label>
					<input type="checkbox" name="cookie_read" id="cookie_read" />
				</p>
				<p>
					<label for="cookie_write">cookie-write</label>
					<input type="checkbox" name="cookie_write" id="cookie_write" />
				</p>
				<p>
					<label for="domaccess_read">domaccess-read</label>
					<input type="checkbox" name="domaccess_read" id="domaccess_read" />
				</p>
				<p>
					<label for="domaccess_write">domaccess-write</label>
					<input type="checkbox" name="domaccess_write" id="domaccess_write" />
				</p>
				<p>
					<label for="storage_read">storage-read</label>
					<input type="checkbox" name="storage_read" id="storage_read" />
				</p>
				<p>
					<label for="storage_write">storage-write</label>
					<input type="checkbox" name="storage_write" id="storage_write" />
				</p>
				<p>
					<label for="extcomm">extcomm</label>
					<input type="checkbox" name="extcomm" id="extcomm" />
				</p>
				<p>
					<label for="geolocation">geolocation</label>
					<input type="checkbox" name="geolocation" id="geolocation" />
				</p>
				<p>
					<button type="button" name="evaluate" onclick="evaluateCode();">evaluate</button>
				<p>
			</fieldset>
			<div id="scriptpart">
				<fieldset>
					<legend>Code</legend>
					<textarea id="codetext" name="code" rows="10" cols="120"></textarea>
					<p id="testpar">Dit is de test paragraaf</p>
				</fieldset>
				<fieldset>
					<legend>Examples</legend>
					<p>
						<button type="button" onclick="loadEx1();">Cookie's</button>
					</p>
					<p>
						<button type="button" onclick="loadEx2();">XHR</button>
					</p>
					<p>
						<button type="button" onclick="loadEx3();">DOM</button>
					</p>
					<p>
						<button type="button" onclick="loadEx4();">COMBO</button>
					</p>
					<p>
						<button type="button" onclick="loadExDocWrite();">doc.write</button>
					</p>
				</fieldset>
			</div>
			<div id="htmlpart" style="display:none;">
				<fieldset>
					<legend>HTML</legend>
					<textarea id="htmltext" name="code" rows="10" cols="120"></textarea>
					<h4>HTML frame:</h4>
					<p><button type="button" onclick="resetHTML();">Reset</button></p>
					<div id="htmlframe">
					</div>
				</fieldset>
				<fieldset>
					<legend>Examples</legend>

					<p>
						<button type="button" onclick="loadExScript();">Script</button>
					</p>
					<p>
						<button type="button" onclick="loadExEvent();">Event</button>
					</p>
					<p>
						<button type="button" onclick="loadExXss();">XSS</button>
					</p>
				</fieldset>
			</div>
		</form>
	</body>
</html>